<template>
  <div class="main" :style="style">
    <div class="first">
      <img class="logoimg" :src="require('../../assets/logo.png')" alt="" />
    </div>
    <div class="second" v-if="!show">
      <div>
        <div>
          <img
            class="titleimg"
            :src="require('../../assets/title.png')"
            alt=""
          />
        </div>
        <div class="dialog">
          <div class="login">
            <el-form
              :model="ruleForm"
              status-icon
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="ECP账号:" prop="accountId">
                <el-select
                  class="select"
                  v-model="ruleForm.accountId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in ecpData"
                    :key="item.value"
                    :label="item.userName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="验证码:" prop="verificationCode">
                <div style="display: flex">
                  <el-input v-model="ruleForm.verificationCode"></el-input>
                  <el-button plain class="send" @click="sendCode">{{
                    text
                  }}</el-button>
                </div>
              </el-form-item>
              <el-form-item label="ERP账号:" prop="cc">
                <el-select
                  class="select"
                  v-model="ruleForm.cc"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in erpData"
                    :key="item.value"
                    :label="item.userName"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div style="padding-left: 20px">
              <el-button
                plain
                class="loginBth"
                :loading="loading"
                @click="login"
                >登录</el-button
              >
            </div>
            <div style="padding-left: 20px">
              <el-button plain class="countBth" @click="accountManage"
                >账号管理</el-button
              >
            </div>
          </div>
        </div>
        <div class="title">国网江苏省电力有限公司物资分公司</div>
      </div>
    </div>
    <AccontMange v-if="show" @back="back"></AccontMange>
    <div class="time" v-if="!show">更新日期 2025-02-13</div>
  </div>
</template>

<script>
import AccontMange from "./accoutMange.vue";
import { getEcpCode, loginEcp, getEcp, getErp, loginErp } from "@/common/api";
export default {
  name: "Login",
  props: {},
  components: {
    AccontMange,
  },
  data() {
    return {
      bgStyle: require("@/assets/backgd.png"),
      ruleForm: {
        accountId: "",
        verificationCode: "",
        cc: "",
      },
      ecpData: [
        // { userName: "账号1", value: 1, id: 1 },
        // { userName: "账号2", value: 2, id: 1 },
        // { userName: "账号3", value: 3, id: 1 },
        // { userName: "账号4", value: 4, id: 1 },
        // { userName: "账号5", value: 5, id: 1 },
      ],
      erpData: [
        // { userName: "账号1", value: 1, id: 1 },
        // { userName: "账号2", value: 2, id: 1 },
        // { userName: "账号3", value: 3, id: 1 },
        // { userName: "账号4", value: 4, id: 1 },
        // { userName: "账号5", value: 5, id: 1 },
      ],
      text: "发送",
      timer: null,
      show: false,
      loading: false,
      rules: {
        accountId: [
          { required: true, message: "请选择ECP账号", trigger: "blur" },
        ],
        verificationCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
        cc: [{ required: true, message: "请选择ERP账号", trigger: "blur" }],
      },
    };
  },
  computed: {
    style() {
      return {
        backgroundImage: `url(${this.bgStyle})`,
        backgroundSize: "cover", // 背景图片大小自适应
        backgroundPosition: "center", // 背景图片居中显示
      };
    },
  },
  destroyed() {
    this.close();
  },
  created() {
    this.getEcpData();
    this.getErpData();
  },
  methods: {
    login() {
      if (process.env.NODE_ENV == "development") {
        //方便调试
        this.$router.push(`/module`);
        return;
      }
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          let param = {
            accountId: this.ruleForm.accountId,
            verificationCode: this.ruleForm.verificationCode,
          };
          loginEcp(param)
            .then((res) => {
              //ECP登录成功进入ERP验证
              if (res.success == 1) {
                this.$successMsg(res.message);
                this.loginErp();
              } else {
                this.$errorMsg(res.message);
              }
            })
            .catch((err) => {
              this.$errorMsg("接口异常");
            });
        } else {
          return false;
        }
      });
      // this.$router.push(`/module`);
    },
    loginErp() {
      let param = {
        accountId: this.ruleForm.cc,
      };
      loginErp(param)
        .then((res) => {
          if (res.success == 1) {
            this.$successMsg(res.message);
            this.$router.push(`/module`);
            let ECP = this.ecpData.find((i) => i.id == this.ruleForm.accountId);
            let ERP = this.erpData.find((i) => i.id == this.ruleForm.cc);
            let useInfo = {
              ECP: ECP.userName,
              ERP: ERP.userName,
            };
            localStorage.setItem("user", JSON.stringify(useInfo)); //本地存储登录信息，下次接口返回未登录时清除
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.$errorMsg("接口异常");
        });
    },
    sendCode() {
      if (this.text !== "发送") return;
      if (!this.ruleForm.accountId) {
        this.$warnMsg("请选择ECP账号");
        return;
      }
      //获取验证码之后开始倒计时
      this.text = 65;
      this.timer = setInterval(() => {
        // console.log("11112222");
        this.text -= 1;
        if (this.text == 0) {
          this.text = "发送";
          this.close();
        }
      }, 1000);
      getEcpCode({ accountId: this.ruleForm.accountId })
        .then((res) => {
          if (res.success == 1) {
            this.$successMsg(res.message);
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.$errorMsg("接口异常");
        });
    },
    close() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    accountManage() {
      this.show = true;
    },
    back() {
      this.show = false;
    },
    getEcpData() {
      getEcp()
        .then((res) => {
          // console.log(res);
          if (res.success == 1) {
            this.ecpData = res.data.rows;
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.$errorMsg("接口异常");
        });
    },
    getErpData() {
      getErp()
        .then((res) => {
          console.log(res);
          if (res.success == 1) {
            this.erpData = res.data.rows;
          } else {
            this.$errorMsg(res.message);
          }
        })
        .catch((err) => {
          this.$errorMsg("接口异常");
        });
    },
  },
};
</script>


<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  .first {
    padding: 10px 20px;
    .logoimg {
      width: 182px;
      height: 52px;
    }
  }
  .second {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    .titleimg {
      height: 100px;
    }
    .dialog {
      display: flex;
      justify-content: center;
      margin-top: 40px;
      .login {
        background-color: white;
        width: 50%;
        // height: 500px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2),
          /* 水平偏移 | 垂直偏移 | 模糊半径 | 阴影颜色与透明度 */ 0 6px 20px
            rgba(0, 0, 0, 0.19); /* 可以添加多个阴影效果 */
        border-radius: 14px;
        padding: 20px 20px 20px 0px;
      }
      .select {
        width: 100%;
      }
      .send {
        margin-left: 20px;
        color: #249087;
        border-color: #249087;
      }
      .loginBth {
        width: 100%;
        color: white;
        background-color: #249087;
      }
      .countBth {
        width: 100%;
        margin-top: 20px;
        color: #249087;
        border-color: #249087;
      }
    }
    .title {
      margin-top: 60px;
      text-align: center;
    }
  }
  .time {
    text-align: right;
    margin-bottom: 40px;
    margin-right: 40px;
  }
}
</style>
